
<style> 
#showtml{ position:absolute; left:30px; top:80px; background:#FFFFFF; width:100px;}
#list_show{ position:absolute; left:30px; top:80px; background:#FFFFFF; width:120px;}
#time_tool { position:absolute; left:10px; top:10px; background:#FFFFFF; width:100%;}
.slidearea {
    padding: 10px 0;
}

.slidearea .slider {
    display: inline-block;
    position: absolute;
    width: 12px;
    height: 12px;
    top: -3px;
    left: 2px;
    border-radius: 50%;
    box-shadow: 0px 0px 1px 1px #808080;
    background-color: #fff;
}

.slidearea .layui-progress-bar {
    -moz-transition: all 0s;
    -o-transition: all 0s;
    -webkit-transition: all 0s;
    transition: all 0s;
}
.BMap_cpyCtrl {
display:none !important;
}
.anchorBL{
display:none !important;
}
</style> 
<div id="allmap" class ="baidu-maps" style="width: 100%;height: 100%"></div> 
         
<div id="time_tool" style="color:white;background-color:rgba(320,138,138,0)">
  <form class="layui-form layui-form-pane " action="" id="trail_query_form" lay-filter="trail_query_form">
    <div class="layui-form-item" style="color:black">
      <div class="layui-inline">
        <div class="layui-input-inline">
          <input id="s_time" type="text" name="s_time" lay-verify="required"  placeholder="开始时间" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-inline">
          <input id="e_time" type="text" name="e_time" lay-verify="required"  placeholder="结束时间" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-inline" style="width: 150px">
          <select id="" name="trail_filter" xm-select="trail_filter" xm-select-type="1" xm-select-height="36px"  placeholder="轨迹过滤">
            <option value="satelite">BDS/GPS</option>
            <option value="wifi">WIFI</option>
            <option value="lbs">LBS</option>
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-inline" style="width: 150px">
          <select id="tml_list" name="device_id"  lay-verify="required" lay-search="" class="layui-input" placeholder="" >
          </select>
        </div>
        <div class="layui-form-mid layui-word-aux">—</div>
        <a class="layui-btn" id="" lay-submit="" lay-filter="trail_query"><i class="layui-icon layui-icon-search" style="font-size: 12px"></i></a>
        <a class="layui-btn" id="run"><i class="fa fa-play" style="font-size: 12px"></i></a>
        <a class="layui-btn" id="pause"><i class="fa fa-pause" style="font-size: 12px"></i></a>
        <a class="layui-btn" id="stop"><i class="fa fa-stop" style="font-size: 12px"></i></a>
        <a class="layui-btn" id="add_play_speed"><i class="layui-icon layui-icon-next" style="font-size: 12px"></i></a>
        <a class="layui-btn" id="prev_play_speed"><i class="layui-icon layui-icon-prev" style="font-size: 12px"></i></a>
      </div>
      <div class="layui-inline" >
        <div class="layui-input-inline" style="font-size: 12px;width: 60px">
          <select class="layui-select" id="play_speed" name="play_speed">
          <option value="1400">7X</option>
          <option value="1200">6X</option>
          <option value="1000">5X</option>
          <option value="800">4X</option>
          <option value="600">3X</option>
          <option value="400" selected="">2X</option>
          <option value="200">1X</option>
        </select>
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-inline slidearea">
          <div class="layui-progress" lay-showpercent="true" lay-filter="trail_progress">
            <div class="layui-progress-bar layui-bg-blue" lay-percent="0%" ><font id="play_pro"  style="color:black"></font></div>
            <span class="slider"></span>
          </div>
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label layui-bg-green" style="font-size: 12px;width: 60px">详情</label>
        <div class="layui-input-inline">
          <input id="" type="checkbox" lay-skin="switch" lay-text="ON|OFF" checked name="detail_info_show">
        </div>
      </div>
    </div>
  </form>
</div>


<script type="text/javascript">
formSelects.render()
formSelects.value('trail_filter', ['satelite'])
var add_dev_detail=function(gps){
  console.log(gps)
    // 绑定的用户信息
    var user_detail=gps.user_detail;
    // if(user_detail!='0' | user_detail!=0){
    //   user_detail=gps.user_detail.current
    // }
    var dev_user_name=gps.user_name;
    var user_sex='',user_department='',user_character='',user_age='',user_picture='';
    if(user_detail!='0' | user_detail!=0){
      user_sex=user_detail.sex
      var person_detail=eval('('+user_detail.person_detail+')')
      user_department=person_detail.department
      user_character=person_detail.character
      user_age=person_detail.person_age
      user_picture=person_detail.picture
      dev_user_name=user_detail.name
    }
    if(user_picture==='' | user_picture==null){
      user_picture='/static/img/person_default.png'
    }
    var param1='性别：'+user_sex
    var param2='年龄：'+user_age
    var param3='部门：'+user_department
    var param4='职位：'+user_character

        //信息窗口参数
      var opts = {
        width : 470,     // 信息窗口宽度
        height: 450,     // 信息窗口高度
        };
      var trail_window=
            '<div class="layui-row" style="height:300px";>'+
              '<div class="layui-col-md1" style="padding:2px;background-color: #F2F2F2;">'+
                '<div class="layui-card">'+
                  '<div class="layui-card-body">'+
                    '<img src="'+user_picture+'" style="width: 100px;height: 140px">'+
                  '</div>'+
                '</div>'+
              '</div>'+
              '<div class="layui-col-md2" style="padding:2px;background-color: #F2F2F2;">'+
                '<div class="layui-card">'+
                  '<div class="layui-card-body">'+
                    '<table class="layui-table" lay-size="sm" lay-skin="nob" style="font-size:13px;height: 140px";>'+
                      '<tr >'+
                      '<td colspan=2><font>'+'名称： '+dev_user_name+'</font></td>'+
                      '</tr>'+
                      '<tr>'+
                      '<td colspan=2>'+'设备ID： '+gps.device_id+'</td>'+
                      '</tr>'+
                      '<tr>'+
                      '<td >'+param1+'</td>'+'<td >'+param2+'</td>'+
                      '</tr>'+
                      '<tr>'+
                      '<td >'+param3+'</td>'+'<td >'+param4+'</td>'+
                      '</tr>'+
                      '</table>'+
                  '</div>'+
                '</div>'+
              '</div>'+
              '<div class="layui-col-md9" style="padding:2px">'+
                '<table id="trail_detail_table" class="layui-table" style="padding:0px;margin:-5px" lay-filter="trail_detail_table"></table>'+
              '</div>'+
            '</div>'
    ;
    $('.layui-footer').empty()
    $('.layui-footer').append(trail_window)
};


var interact_table=function(d){
  table.render({
            elem: '#trail_detail_table',
            data: d,
            id:'trail_detail_table',
            skin:'nob',
            size:'sm',
            height:'155',
            cols: [[
                {field: 'index_num',width:80, title: '序号',templet:function(d){
                  return d.LAY_INDEX
                }},
                {field: 'heart_rate',width:80, title: '心率',sort:true},
                {field: 'blood_pres',width:120, title: '血压',sort:true,templet:function(d){
                  var blood_pres='0'
                  if(d.blood_pres!='0'){
                    blood_pres=eval('('+d.blood_pres+')')
                    blood_pres='高：'+blood_pres['h_pres']+','+'低：'+blood_pres['l_pres']
                  }
                  return blood_pres
                }},
                {field: 'temp',width:80, title: '温度',sort:true},
                {field: 'step_count',width:80, title: '步数',sort:true},
                {field: 'dirct',width:80, title: '方向',sort:true},
                {field: 'speed',width:80, title: '速度',sort:true},
                {field: 'serv_receive',width:180, title: '时间',sort:true},
                {field: 'location', title: '位置',templet:function(d){
                  
                  if(d.lng==0 | d.lng=='0'){
                    return '地址为空'
                  }else{
                    return '<a id="trail'+d.id+'" class="layui-btn layui-btn-primary layui-btn-xs" onclick="show_trail_location('+d.lng+','+d.lat+',\''+d.device_id+'\','+d.id+')">'+d.lng+'，'+d.lat+'</a>'
                  }
                  return d.lng+'，'+d.lat
                }},
            ]],
            limit:10000000
            // page: false
          });

}
table.on('row(trail_detail_table)',function(obj){
  console.log(obj)
  open_infowindow(obj.data)
})

var show_trail_location=function(lng,lat,dev_id,trail_id){
  console.log(lng,lat,dev_id)
  var point=new BMap.Point(lng,lat)
  gps_location(point,dev_id)
  setTimeout(function(){
    $('#trail'+trail_id).text(postion_all[dev_id])
  },500)

}
// 百度地图调用
var fugaiwu=new Array();
var hard_info;
var mylabel;
var marker;
var map = new BMap.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 5); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
  mapTypes:[
          BMAP_NORMAL_MAP,
          BMAP_HYBRID_MAP
      ]}));   
         // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);
map.enableAutoResize();
var geoc = new BMap.Geocoder();  



//地图打点功能函数
var addmaker=function(gps){
  var myIcon
  myIcon = new BMap.Icon("/static/device_icon/track_button.png", new BMap.Size(72,144),{anchor : new BMap.Size(15, 33),imageSize:new BMap.Size(22, 30)});
  var point,gps_lng,gps_lat;
  point=new BMap.Point(gps.lng,gps.lat)
  marker = new BMap.Marker(point,{icon:myIcon});
  map.addOverlay(marker);//加载定位点
  marker.setTitle(gps.device_id);//设置标题
  var pt_label=new BMap.Label(gps.device_id,{offset:new BMap.Size(20,-10)});
  marker.setLabel(pt_label);
  return marker
};


var postion_all=new Array;
var trail_locations=new Array;

//轨迹回放用的坐标转中文地址计算
var trail_location=function(pt,mesg_receive){
      var location
      geoc.getLocation(pt, function(rs){
      var addComp = rs.address
      if(rs.surroundingPois.length!=0){
         location=addComp+','+rs.surroundingPois[0]['title']
         trail_locations[mesg_receive]=location;
      }else{
         location=addComp
         trail_locations[mesg_receive]=location;
      }
    });
    };
//地图定位图标用的坐标转中文地址计算
var gps_location=function(pt,gps_id){
      var location
      geoc.getLocation(pt, function(rs){
      console.log(rs)
      var addComp = rs.address
      if(rs.surroundingPois.length!=0){
         location=addComp+','+rs.surroundingPois[0]['title']
         postion_all[gps_id]=location;
           
      }else{
         location=addComp
         postion_all[gps_id]=location;
      }
    });
    };

//信息窗口
var open_infowindow=function(tp){
  var blood_pres=''
  if(tp.blood_pres!='0'){
    blood_pres=eval('('+tp.blood_pres+')')
    blood_pres=blood_pres['h_pres']+'/'+blood_pres['l_pres']
  }
  //信息窗口参数
  var opts = {
    width : 40,     // 信息窗口宽度
    height: 140,     // 信息窗口高度
    };

  var p=
    "<div style='margin:0;padding:0;'>"+
      "<table class='layui-table' lay-size='sm' lay-skin='nob' style='margin:0;padding:0;border-radius:20px'>"+
        "<tr>"+
          "<td>"+
            "<i class='fa fa-heartbeat' aria-hidden='true' style='color: red;'></i>："+tp.heart_rate+"次/min"+
          "</td>"+
          "<td>"+
            "<i class='fa fa-thermometer-empty'  style='color:#FFB800'></i>："+''+"C°"+
          "</td>"+
        "</tr>"+
        "<tr>"+
          "<td>"+
           " <i class='fa fa-stethoscope' aria-hidden='true' style='color: blue;'></i>："+blood_pres+
          "</td>"+
          "<td>"+
            "<i class='fa fa-blind' aria-hidden='true' style='color:#5FB878'></i>："+tp.step_count+"步"+
          "</td>"+
        "</tr>"+
        "<tr>"+
         "<td>"+
            "<i class='fa fa-compass' aria-hidden='true' style='color:#5FB878'></i>："+tp.dirct+"°"+
          "</td>"+
          "<td>"+
            "<i class='fa fa-hourglass'  style='color:#FFB800'></i>："+tp.speed+"km/h"+
          "</td>"+
        "</tr>"+
        "<tr>"+
          "<td>"+
            " <i class='fa fa-map-marker' aria-hidden='true' style='color:#5FB878'></i>："+tp.track_type+
          "</td>"+
        "</tr>"+
        "<tr>"+
          "<td colspan='2'>"+
            "<i class='layui-icon layui-icon-console' aria-hidden='true' style='color:#1E9FFF'></i>："+tp.serv_receive+
          "</td>"+
        "</tr>"+
      "</table>"+
    "</div>";
    var gpsinfoWindow = new BMap.InfoWindow(p, opts);
    // gpsinfoWindow.open()
    var point=new BMap.Point(tp.lng,tp.lat)
    map.openInfoWindow(gpsinfoWindow,point);    
};

// 自定义轨迹路线播放功能
var trail_opt={};
trail_opt['play_speed']=parseInt($('#play_speed').val())

form.on('submit(trail_query)',function(obj){

  var trail_filter=formSelects.value('trail_filter','val')
  if(trail_filter.length==0){
    trail_filter=['satelite']
  }

  var trail_param=obj.field
  trail_param.trail_filter=trail_filter
  trail_param.map_kind='bd'
  
  if(obj.field.device_id!=='' && obj.field.detail_info_show=='on'){
      $('.layui-body').attr('style','padding:0px;bottom:160px;left:0px')
      $('.layui-footer').attr('style','height:160px')
      $('.layui-footer').show()
      $('.layui-side').hide()
      var dev=get_detail_from_id(device,obj.field.device_id)
      add_dev_detail(dev)
  }else{
    $('.layui-body').attr('style','padding:0px;bottom:0px;left:0px')
    $('.layui-footer').empty()
    $('.layui-footer').hide()
  }

  trail_param=JSON.stringify(trail_param)
  console.log(trail_param)
   $.ajax({
          type: 'POST',
          url:"/trail/?what="+'get_trail',
          data:{trail_param},
          async:true,
          dataType: 'json',
          success: function( hard_info) {
            console.log(hard_info)
            interact_table(hard_info)
            var tarckpoint=new Array();
            var trackinfo=new Array();

            if(hard_info.length==0){
              layer.msg('该时间段没有轨迹数据');
              return false;
            };
            // 清除之前的覆盖物
            map.clearOverlays()
            //轨迹点封装
            trail_opt['point_order']={}

            for(var i=0;i<hard_info.length;i++){
              var point_len=hard_info.length
              var point_order=(Math.round((1/point_len)*100))*i+'%'
              var lng=hard_info[i]['lng']
              var lat=hard_info[i]['lat']
              
              var pt_trail = new BMap.Point(lng,lat);
              pt_trail['html']='<div>'+hard_info[i]['serv_receive']+','+hard_info[i]['speed']+'公里/小时</div>'
              pt_trail['dev_datail']=hard_info[i]
              trail_opt['point_order'][point_order]=pt_trail
              trail_location(pt_trail,hard_info[i]['serv_receive'])
              tarckpoint.push(pt_trail);
              trackinfo.push(hard_info[i]);
            };
            var trail_points_show = new BMap.PointCollection(tarckpoint, {size: BMAP_POINT_SIZE_NORMAL,shape: BMAP_POINT_SHAPE_CIRCLE,
            color: '#18a45b'});
            trail_points_show.addEventListener('click', function (e) {
              open_infowindow(e.point.dev_datail)
            })
            map.addOverlay(trail_points_show)

            trail_opt['tarckpoint']=tarckpoint
            trail_opt['status']='f_run'
            trail_opt['current_pt']=0
            carMk=addmaker(hard_info[0])
            trail_opt['carMk']=carMk
            // console.log(tarckpoint)
            
            start_Icon = new BMap.Icon("/static/img/start.png", new BMap.Size(100,60),{anchor : new BMap.Size(15, 33),imageSize:new BMap.Size(28, 30)});
            end_Icon = new BMap.Icon("/static/img/end.png", new BMap.Size(100,60),{anchor : new BMap.Size(15, 33),imageSize:new BMap.Size(28, 30)});
            var endpoint=new BMap.Point(tarckpoint[tarckpoint.length-1].lng,tarckpoint[tarckpoint.length-1].lat);
            var startpoint=new BMap.Point(tarckpoint[0].lng,tarckpoint[0].lat);
            var startmarker = new BMap.Marker(startpoint,{icon:start_Icon});
            var endmarker=new BMap.Marker(endpoint,{icon:end_Icon});
            // var startlabel=new BMap.Label("起点",{offset:new BMap.Size(20,-10)});
            // var endlabel=new BMap.Label("终点",{offset:new BMap.Size(20,-10)});
            // startmarker.setLabel(startlabel);
            // endmarker.setLabel(endlabel);
            startmarker.setTitle('start');
            endmarker.setTitle('end');
            map.addOverlay(startmarker); 
            map.addOverlay(endmarker); 
            // var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
            //     scale: 0.6,//图标缩放大小
            //     strokeColor:'#fff',//设置矢量图标的线填充颜色
            //     strokeWeight: 2,//设置线宽
            // });
            // var icons = new BMap.IconSequence(sy, '10', '30');//设置为true，可以对轨迹进行编辑
            var polyline = new BMap.Polyline(tarckpoint, {
                strokeColor:"#18a45b",//设置颜色
                strokeWeight:8 ,//宽度
                strokeOpacity:0.8,//折线的透明度，取值范围0 - 1
                enableEditing: false,//是否启用线编辑，默认为false
                enableClicking: false,//是否响应点击事件，默认为true
                // icons:[icons]
            });
            map.addOverlay(polyline);
            map.setViewport(tarckpoint);
      }
    })
  });

// 播放轨迹
$("#run").click(function(){
  console.log('run====>')
  var pts=trail_opt['tarckpoint']
  var carMk=trail_opt['carMk']
  var point_num=pts.length
  var ii=0
  // map.setZoom(17)
  // 从百度第三方开源库LUSHU路书源码摘出图标移动部分，做了适应修改
  var marker_move=function(i) {
    var initPos=pts[i]
    var targetPos=pts[i+1]
    var point_num=pts.length;
    
    // 获取两点距离
    function _getDistance(pxA, pxB) {
        return Math.sqrt(Math.pow(pxA.x - pxB.x, 2) + Math.pow(pxA.y - pxB.y, 2));
    };
    // wgs84坐标转换为墨卡托坐标
    function _getMercator(poi) {
        return map.getMapType().getProjection().lngLatToPoint(poi);
    };
    // 未知,大概是平滑滤波之类,确保移动的平滑.
    function effect(initPos, targetPos, currentCount, count) {
      var b = initPos, c = targetPos - initPos, t = currentCount,
      d = count;
      return c * t / d + b;
    }
      //当前的帧数
      currentCount = 0;
      //步长，米/秒
      timer = 10;
      step = trail_opt['play_speed'] / (1000 / timer);
      //初始坐标
      init_pos = map.getMapType().getProjection().lngLatToPoint(initPos);
      //获取结束点的(x,y)坐标
      target_pos = map.getMapType().getProjection().lngLatToPoint(targetPos);
      //总的步长
      count = Math.round(_getDistance(init_pos, target_pos) / step);

    setSlider(((i+1)/point_num), 'trail_progress');
    intervalFlag = setInterval(function() {
    //两点之间当前帧数大于总帧数的时候，则说明已经完成移动
        if (currentCount >count | count < 1) {
            clearInterval(intervalFlag);
            i++
            // 当前运行的轨迹点做自增加记录
            trail_opt['current_pt']++;
            console.log(i,trail_opt,point_num)
            if(i>point_num){
              return 
            }
            move_next(i)
            
        }else {
                currentCount++;
                var x = effect(init_pos.x, target_pos.x, currentCount, count),
                    y = effect(init_pos.y, target_pos.y, currentCount, count),
                    pos = map.getMapType().getProjection().pointToLngLat(new BMap.Pixel(x, y));
                // 设置marker
                if(currentCount == 1){
                    var pt_label=carMk.getLabel()
                    pt_label.setContent(initPos['html']);
                    carMk.setLabel(pt_label);
                    if(!map.getBounds().containsPoint(pos)){
                      map.panTo(pos);
                    } 
                }
                //正在移动
                
                carMk.setPosition(pos);
                

                //设置自定义overlay的位置
            }
    },timer);
  };
// 停止状态和首次运行状态，启动轨迹
  if(trail_opt['status']=='f_run' | trail_opt['status']=='stop'){
    trail_opt['status']='run';
    trail_opt['current_pt']=0
    marker_move(ii)
// 正在运行轨迹的状态，点击play无效
  }else if(trail_opt['status']==='run'){
    return
// 按下暂停，记录暂停状态，再点击播放，从暂停处开始播放
  }else{
    if(trail_opt['current_pt']>=point_num){
      trail_opt['current_pt']=0
    }
    trail_opt['status']='run'
    marker_move(trail_opt['current_pt'])
  }
// 递归判断条件，上一个点移动完毕，判断是否还有下一个点需要移动
  var move_next=function(num){
    if(num <= point_num-2 && trail_opt['status']=='run'){
      marker_move(num)
    }else{
      ii=0;
      if(trail_opt['current_pt']>=point_num-2){
      trail_opt['current_pt']=0
      }
      trail_opt['status']='stop'
      setSlider((1), 'trail_progress');
    }
  }
    
});
// 暂停
$("#pause").click(function(){
  trail_opt['status']='pause'
  console.log(trail_opt)
});
// 停止
$("#stop").click(function(){
  trail_opt['status']='stop'
  setSlider(0,'trail_progress')
});

// 加快播放速度
$("#add_play_speed").click(function(){

  trail_opt['play_speed']=trail_opt['play_speed']+200
  if (trail_opt['play_speed']>1400){
    trail_opt['play_speed']=1400
  }

  form.val('trail_query_form',{'play_speed':trail_opt['play_speed'].toString()})
});
// 降低播放速度
$("#prev_play_speed").click(function(){
  trail_opt['play_speed']=trail_opt['play_speed']-200
  if (trail_opt['play_speed']<200){
    trail_opt['play_speed']=200
  }
  form.val('trail_query_form',{'play_speed':trail_opt['play_speed'].toString()})
});


//添加选择设备列表
$(function(){ 
  $('#tml_list').empty()

  $('#tml_list').append('<option value="">选择/搜索设备</option>')
  
  for (var i = device.length - 1; i >= 0; i--) {
    var user_name=device[i]['user_name'];
    if(device[i]['user_detail']!='0'){
      user_name=device[i].user_detail.name
    }
    var option='<option value="'+device[i].device_id+'">'+user_name+'</option>'
    if(chosed_dev.device_id==device[i].device_id){
      option='<option value="'+device[i].device_id+'" selected="">'+user_name+'</option>'
    }
    $('#tml_list').append(option)
  }
    form.render()
}); 

laydate.render({
  elem: '#s_time'
  ,type: 'datetime'
  ,value:new Date(new Date(new Date().toLocaleDateString()).getTime())
  ,btns: ['clear','now', 'confirm']
});

laydate.render({
  elem: '#e_time'
  ,type: 'datetime'
  ,value:new Date()
  ,btns: ['clear','now', 'confirm']
});


// 进度条拖动功能开始
var setSlider = function (value, filter) {
  if (value > 1) value = 1;
  if (value < 0) value = 0;
  var selectFilte = '';
  if (filter)
      selectFilter = '[lay-filter="' + filter + '"]';
  //设置进度条位置
  element.progress(filter, value * 100 + '%');
  //设置滑块位置
  $('.slider').css('left', $('.layui-progress' + selectFilter).children('.layui-progress-bar')[
      0].offsetWidth - 5 + 'px');
  $('#play_pro').text(Math.round(value * 100) + '%');
  return Math.round(value * 100) + '%';
}
var move = false;
//鼠标按下
$('.slidearea').on('mousedown', function (event) {
  if (event.button === 0 && trail_opt['status']!=null) {
    move = true;
    var offsetX = event.target == $('.slider')[0] ? Number($(event.target).css('left').replace(
        'px', '')) + event.offsetX : event.offsetX;
    var value = Math.round(offsetX / $(this).width() * 100) / 100;
    $('#play_pro').text(setSlider(value, 'trail_progress'));
  }
});
// 鼠标放开
$('.slidearea').on('mouseup', function (event) {move=false})
//鼠标移动
$(".slidearea").on("mousemove", function (event) {
  event.preventDefault();
  if (move && trail_opt['status']!=null) {
    var offsetX = event.target == $('.slider')[0] ? Number($(event.target).css('left').replace(
        'px', '')) + event.offsetX : event.offsetX;

    var value = Math.round(offsetX / $(this).width() * 100) / 100;
    var percent_num=setSlider(value, 'trail_progress')

    $('#play_pro').text(percent_num);

    if(trail_opt['point_order'][percent_num]){
      var order_num=trail_opt['point_order'][percent_num]
      carMk=trail_opt['carMk']
      mk_label=carMk.getLabel()
      mk_label.setContent(order_num.html)
      carMk.setLabel(mk_label)
      carMk.setPosition(order_num);
      map.panTo(order_num);
    }
  }
});
// 进度条拖动功能结束

// 地图控件
var navigationControl = new BMap.NavigationControl({
    // 靠左上角位置
    anchor: BMAP_ANCHOR_TOP_RIGHT,
    offset: new BMap.Size(10, 60), //偏离值
    // LARGE类型
    type: BMAP_NAVIGATION_CONTROL_LARGE,
    // 启用显示定位
    enableGeolocation: true
  });
  map.addControl(navigationControl);
  // 添加定位控件

var show_self_addr = new BMap.GeolocationControl();
  show_self_addr.addEventListener("locationSuccess", function(e){
    // 定位成功事件
    var address = '';
    address += e.addressComponent.province;
    address += e.addressComponent.city;
    address += e.addressComponent.district;
    address += e.addressComponent.street;
    address += e.addressComponent.streetNumber;
    layer.msg("当前定位地址为：" + address);
  });
  show_self_addr.addEventListener("locationError",function(e){
    // 定位失败事件
    layer.msg(e.message);
  });
  map.addControl(show_self_addr);

var pi = 3.14159265358979324;
var a = 6378245.0;
var ee = 0.00669342162296594323;
var x_pi = 3.14159265358979324 * 3000.0 / 180.0;

function wgs2bd(lat, lon) {
       _wgs2gcj = wgs2gcj(lat, lon);
       _gcj2bd = gcj2bd(_wgs2gcj[0], _wgs2gcj[1]);
       return _gcj2bd;
}

function gcj2bd(lat, lon) {
       x = lon, y = lat;
       z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
       theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
       bd_lon = z * Math.cos(theta) + 0.0065;
       bd_lat = z * Math.sin(theta) + 0.006;
       return [ bd_lat, bd_lon ];
}

function bd2gcj(lat, lon) {
       x = lon - 0.0065, y = lat - 0.006;
       z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
       theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
       gg_lon = z * Math.cos(theta);
       gg_lat = z * Math.sin(theta);
       return [ gg_lat, gg_lon ];
}

function wgs2gcj(lat, lon) {
       dLat = transformLat(lon - 105.0, lat - 35.0);
       dLon = transformLon(lon - 105.0, lat - 35.0);
       radLat = lat / 180.0 * pi;
       magic = Math.sin(radLat);
       magic = 1 - ee * magic * magic;
       sqrtMagic = Math.sqrt(magic);
       dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
       dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
       mgLat = lat + dLat;
       mgLon = lon + dLon;
       return [ mgLat, mgLon ];
}

function transformLat(lat, lon) {
       ret = -100.0 + 2.0 * lat + 3.0 * lon + 0.2 * lon * lon + 0.1 * lat * lon + 0.2 * Math.sqrt(Math.abs(lat));
       ret += (20.0 * Math.sin(6.0 * lat * pi) + 20.0 * Math.sin(2.0 * lat * pi)) * 2.0 / 3.0;
       ret += (20.0 * Math.sin(lon * pi) + 40.0 * Math.sin(lon / 3.0 * pi)) * 2.0 / 3.0;
       ret += (160.0 * Math.sin(lon / 12.0 * pi) + 320 * Math.sin(lon * pi  / 30.0)) * 2.0 / 3.0;
       return ret;
}

function transformLon(lat, lon) {
       ret = 300.0 + lat + 2.0 * lon + 0.1 * lat * lat + 0.1 * lat * lon + 0.1 * Math.sqrt(Math.abs(lat));
       ret += (20.0 * Math.sin(6.0 * lat * pi) + 20.0 * Math.sin(2.0 * lat * pi)) * 2.0 / 3.0;
       ret += (20.0 * Math.sin(lat * pi) + 40.0 * Math.sin(lat / 3.0 * pi)) * 2.0 / 3.0;
       ret += (150.0 * Math.sin(lat / 12.0 * pi) + 300.0 * Math.sin(lat / 30.0 * pi)) * 2.0 / 3.0;
       return ret;
}

function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}


// 转换墨卡托坐标
// var _getMercator=function(poi) {
//     return map.getMapType().getProjection().lngLatToPoint(poi);
// }
/**
 * 计算两点间的距离
 * @param {Point} poi 经纬度坐标A点.
 * @param {Point} poi 经纬度坐标B点.
 * @return 无返回值.
 */
// var _getDistance=function(pxA, pxB) {
//     return Math.sqrt(Math.pow(pxA.x - pxB.x, 2) + Math.pow(pxA.y - pxB.y, 2));
// }
  //目标点的  当前的步长,position,总的步长,动画效果,回调
/**
 * 移动小车
 * @param {Number} poi 当前的步长.
 * @param {Point} initPos 经纬度坐标初始点.
 * @param {Point} targetPos 经纬度坐标目标点.
 * @param {Function} effect 缓动效果.
 * @return 无返回值.
 */

</script>

